<template>
	<gui-page :customHeader="true" style="background: #f3f3f3;">
		<template v-slot:gHeader>
			<!-- #ifdef MP -->
			<view style="height:20px;"></view>
			<!-- #endif -->
		</template>
		<template v-slot:gBody>
			<view class="ps gui-bg-white" style="z-index: 100;">
				<!-- 切换导航 -->
				<view class="gui-border-b gui-padding-small">
					<gui-switch-navigation :items="navItems" :isCenter="true" :size="180" lineHeight="60rpx" width="750"
						textAlign="center" activeLineWidth="180rpx" activeLineHeight="6rpx"
						:activeLineClass="['gui-gtbg-red']" :margin="10" @change="navChange"></gui-switch-navigation>
				</view>
			</view>

			<view class="gui-padding-m">
				<view class="gui-padding gui-bg-white gui-border-radius mb10">
					<cc-title-subitem></cc-title-subitem>
					<view class="cc-course-gridbox-nine">
						<view class="list-course-item mb10" v-for="num in 9">
							<view class="imgbox">
								<image src="../../static/imgs/bg.jpg"></image>
							</view>
							<view class="mt5">
								<text class="pushtag">推荐</text>
								<text class="newtag ml5">最新</text>
								<text class="hottag ml5">最热</text>
							</view>
							<view class="mt5"><text class="fb">邢不行-Python股票量化投资课程</text></view>
							<view class="mt5">
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="fz12 ml5">5.0</text>
							</view>
							<view class="mt5">
								<text class="red fb fz16">￥2488</text>
								<text class="textdel fz12 gui-color-gray ml5">￥15888</text>
							</view>
						</view>
					</view>
				</view>

				<view class="gui-padding gui-bg-white gui-border-radius mb10">
					<cc-title-subitem></cc-title-subitem>
					<view class="cc-course-gridbox-oot">
						<view class="list-course-item mb10" v-for="num in 5">
							<view class="imgbox">
								<image src="../../static/imgs/bg.jpg"></image>
							</view>
							<view class="mt5">
								<text class="pushtag">推荐</text>
								<text class="newtag ml5">最新</text>
								<text class="hottag ml5">最热</text>
							</view>
							<view class="mt5"><text class="fb">邢不行-Python股票量化投资课程</text></view>
							<view class="mt5">
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="fz12 ml5">5.0</text>
							</view>
							<view class="mt5">
								<text class="red fb fz16">￥2488</text>
								<text class="textdel fz12 gui-color-gray ml5">￥15888</text>
							</view>
						</view>
					</view>
				</view>

				<view class="gui-padding gui-bg-white gui-border-radius mb10">
					<cc-title-subitem></cc-title-subitem>
					<view class="cc-course-gridbox">
						<view class="list-course-item " v-for="num in 3">
							<view class="imgbox">
								<image src="../../static/imgs/bg.jpg"></image>
							</view>
							<view class="mt5">
								<text class="pushtag">推荐</text>
								<text class="newtag ml5">最新</text>
								<text class="hottag ml5">最热</text>
							</view>
							<view class="mt5"><text class="fb">邢不行-Python股票量化投资课程</text></view>
							<view class="mt5">
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="fz12 ml5">5.0</text>
							</view>
							<view class="mt5">
								<text class="red fb fz16">￥2488</text>
								<text class="textdel fz12 gui-color-gray ml5">￥15888</text>
							</view>
						</view>
					</view>
				</view>

				<view class="gui-padding gui-bg-white gui-border-radius mb10">
					<cc-title-subitem></cc-title-subitem>
					<view class="cc-coursebox-list-full">
						<view class="list-course-item mb10" v-for="num in 10">
							<view class="imgbox">
								<image src="../../static/imgs/bg.jpg"></image>
							</view>
							<view class="mt5">
								<text class="pushtag">推荐</text>
								<text class="newtag ml5">最新</text>
								<text class="hottag ml5">最热</text>
							</view>
							<view class="mt5"><text class="fb">邢不行-Python股票量化投资课程</text></view>
							<view class="mt5">
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="fz12 ml5">5.0</text>
							</view>
							<view class="mt5">
								<text class="red fb fz16">￥2488</text>
								<text class="textdel fz12 gui-color-gray ml5">￥15888</text>
							</view>
						</view>
					</view>
				</view>

				<view class="gui-padding gui-bg-white gui-border-radius mb10">
					<cc-title-subitem></cc-title-subitem>
					<view class="cc-coursebox-list">
						<view class="list-course-item mb10" v-for="num in 10">
							<view class="imgbox">
								<image src="../../static/imgs/bg.jpg"></image>
							</view>
							<view class="mt5">
								<text class="pushtag">推荐</text>
								<text class="newtag ml5">最新</text>
								<text class="hottag ml5">最热</text>
							</view>
							<view class="mt5"><text class="fb">邢不行-Python股票量化投资课程</text></view>
							<view class="mt5">
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="fz12 ml5">5.0</text>
							</view>
							<view class="mt5">
								<text class="red fb fz16">￥2488</text>
								<text class="textdel fz12 gui-color-gray ml5">￥15888</text>
							</view>
						</view>
					</view>
				</view>


				<view class="gui-padding gui-bg-white gui-border-radius mb10">
					<cc-title-subitem></cc-title-subitem>
					<view class="cc-coursebox-list-scroll">
						<view class="list-course-item" v-for="num in 10">
							<view class="imgbox">
								<image src="../../static/imgs/bg.jpg"></image>
							</view>
							<view class="mt5">
								<text class="pushtag">推荐</text>
								<text class="newtag ml5">最新</text>
								<text class="hottag ml5">最热</text>
							</view>
							<view class="mt5"><text class="fb">邢不行-Python股票量化投资课程</text></view>
							<view class="mt5">
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="gui-icons yellow fz12">&#xe605;</text>
								<text class="fz12 ml5">5.0</text>
							</view>
							<view class="mt5">
								<text class="red fb fz16">￥2488</text>
								<text class="textdel fz12 gui-color-gray ml5">￥15888</text>
							</view>
						</view>
					</view>
				</view>

				<view class="gui-padding gui-bg-white gui-border-radius mb10">
					<cc-title-subitem></cc-title-subitem>
					<view class="cc-coursebox-list-normal">
						<view class="list-course-item flex justify-content-between"
							v-for="num in 10">
							<view class="imgbox">
								<image src="../../static/imgs/bg.jpg"></image>
							</view>
							<view class="ml15">
								<view class="titbox">
									<text class="pushtag">推荐</text>
									<text class="newtag ml5">最新</text>
									<text class="hottag ml5">最热</text>
									<text class="ml5 fb">邢不行-Python股票量化投资课程</text>
								</view>
								<view class="mt5">
									<text class="gui-icons yellow fz12">&#xe605;</text>
									<text class="gui-icons yellow fz12">&#xe605;</text>
									<text class="gui-icons yellow fz12">&#xe605;</text>
									<text class="gui-icons yellow fz12">&#xe605;</text>
									<text class="gui-icons yellow fz12">&#xe605;</text>
									<text class="fz12 ml5">5.0</text>
								</view>
								<view class="mt5">
									<text class="red fb fz16">￥2488</text>
									<text class="textdel fz12 gui-color-gray ml5">￥15888</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</template>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {
				// 切换导航
				navItems: [{
					id: 1,
					name: '编程开发'
				}, {
					id: 2,
					name: '数据分析'
				}, {
					id: 3,
					name: '设计创造'
				}, {
					id: 2,
					name: '新媒体电商'
				}, {
					id: 3,
					name: '人工智能'
				}],
			}
		},

		created() {},

		methods: {

		}
	}
</script>
<style scoped lang="scss">


</style>